<template>
  <BasicModal v-bind="$attrs" @register="registerModal" :defaultFullscreen="true" destroyOnClose title="模板配置" :width="800" @ok="handleSubmit">
    <div class="template-info">
      <div>模板编码：{{ templateParams.templateCode }}</div>
      <div class="info-bottom">
        <div class="template-name">模板名称：{{ templateParams.templateName }}</div>
        <div>描述：{{ templateParams.description }}</div>
      </div>
    </div>
    <!--引用表格-->
    <BasicTable @register="registerTable">
      <template #bodyCell="{ column, record }">
        <template v-if="column.editRow && column.editComponent === 'Switch'">
          <a-switch
            checkedChildren="是"
            unCheckedChildren="否"
            :checkedValue="'true'"
            :unCheckedValue="'false'"
            size="small"
            v-model:checked="record[column['dataIndex']]"
          />
        </template>
        <template v-if="column.editRow && column.editComponent === 'Input'">
          <a-input v-model:value="record[column['dataIndex']]" />
        </template>
      </template>
    </BasicTable>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicTable } from '/@/components/Table';
  import { useListPage } from '/@/hooks/system/useListPage';
  import { configTableColumns } from '../HubTeamTemplate.data';
  import { getTemplateConfigList, saveConfigs } from '../HubTeamTemplate.api';
  import { useMessage } from '/@/hooks/web/useMessage'; // 轻提醒
  const { createMessage: $message } = useMessage(); // 解构
  // Emits声明
  const emit = defineEmits(['register', 'success']);

  const dataSource = [
    {
      saveCode: 'elementScore1',
      saveName: '',
      isOpen: false,
      displayOrder: 1,
    },
    {
      saveCode: 'elementScore2',
      saveName: '',
      isOpen: false,
      displayOrder: 2,
    },
    {
      saveCode: 'elementScore3',
      saveName: '',
      isOpen: false,
      displayOrder: 3,
    },
    {
      saveCode: 'elementScore4',
      saveName: '',
      isOpen: false,
      displayOrder: 4,
    },
    {
      saveCode: 'elementScore5',
      saveName: '',
      isOpen: false,
      displayOrder: 5,
    },
    {
      saveCode: 'elementScore6',
      saveName: '',
      isOpen: false,
      displayOrder: 6,
    },
    {
      saveCode: 'elementScore7',
      saveName: '',
      isOpen: false,
      displayOrder: 7,
    },
    {
      saveCode: 'elementScore8',
      saveName: '',
      isOpen: false,
      displayOrder: 8,
    },
    {
      saveCode: 'elementScore9',
      saveName: '',
      isOpen: false,
      displayOrder: 9,
    },
    {
      saveCode: 'elementScore10',
      saveName: '',
      isOpen: false,
      displayOrder: 10,
    },
  ];

  let orgCode = '';
  let templateParams = ref({});

  //注册table数据
  const { tableContext } = useListPage({
    tableProps: {
      // dataSource,
      columns: configTableColumns,
      canResize: false,
      showIndexColumn: true,
      showActionColumn: false,
      rowKey: 'id',
      formConfig: {
        showActionButtonGroup: false,
      },
    },
  });

  const [registerTable, { getForm, reload, getDataSource, getColumns, setColumns, setTableData }, { rowSelection, selectedRowKeys }] = tableContext;
  //表单配置
  //表单赋值
  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    // getForm.setFieldsValue({});
    // console.log('getForm', getForm());
    const templateConfigList = await getTemplateConfigList({ templateCode: data.templateCode });
    orgCode = data.orgCode;
    templateParams.value = data.templateParams;
    dataSource.forEach((temp: any) => {
      temp.id = '';
      temp.templateCode = data.templateParams.templateCode;
      temp.templateName = data.templateParams.templateName;
      templateConfigList?.forEach((item) => {
        if (temp.saveCode == item.saveCode) {
          // Object.assign(temp, { ...item });
          temp.id = item.id;
          temp.saveName = item.saveName;
          temp.isOpen = item.isOpen;
          temp.displayOrder = item.displayOrder;
        }
      });
    });
    setTableData(dataSource);
  });
  //表单提交事件
  async function handleSubmit() {
    let datas = getDataSource();
    await saveConfigs({
      datas,
      orgCode: orgCode,
      // templateCode: templateParams.value.templateCode,
    });
    closeModal();
    emit('success');
  }

  const templateChange = (e, record) => {
    console.log('record', record);
    console.log('e', e);
    if (!record.saveName) {
      record.isOpen = record.isOpen == 'true' ? 'false' : 'true';
      $message.error('字段名称不能为空!');
    }
  };
</script>

<style lang="less" scoped>
  /** 时间和数字输入框样式 */
  :deep(.ant-input-number) {
    width: 100%;
  }

  :deep(.ant-calendar-picker) {
    width: 100%;
  }

  .template-info {
    padding: 30px;
  }

  .info-bottom {
    display: flex;
    margin-top: 16px;
  }

  .template-name {
    margin-right: 100px;
  }
</style>
